<template>
  <div>
    <ToDoHeader @addTodo="addTodo"/>
    <ToDoMain :list="showList" @delTodo="delTodo"/>
    <ToDoFooter :lastLength="lastLength" :status="status" @updateStatus="updateStatus" @clearCompleted="clearCompleted"/>
  </div>
</template>

<script setup>
import ToDoHeader from './components/ToDoHeader.vue';
import ToDoMain from './components/ToDoMain.vue';
import ToDoFooter from './components/ToDoFooter.vue';
import { ref,reactive,computed} from 'vue';
const old_status = ref('all')
const list = reactive([
  {id:1,name:"晨练",done:false},
  {id:2,name:"跑步",done:true},
  {id:3,name:"游泳",done:true},
])
const lastLength = computed(() => {
    return list.filter(item => !item.done).length
})
const showList = computed(() => {
  if(old_status.value === 'all'){
    return list
  }
  if(old_status.value === 'active'){
    return list.filter(item => !item.done)
  }
  if(old_status.value === 'completed'){
    return list.filter(item =>  item.done)
  }
})
const addTodo = (name) => {
  // ~~ 快速处理浮点数转换为整数
  list.push({name:name,done:false,id: ~~(Math.random() * 1000)})
}
const delTodo = (id) => {
  list = list.splice(list.findIndex(item => item.id === id), 1)
}
const updateStatus = new_status => {
  old_status.value = new_status
}
const clearCompleted = () => {
  list.length = 0
}
</script>

<style scoped>

</style>
